<template>
  <div>
    <el-card style="margin:5px;height: 70px;">
      <el-form inline="inline">
        <el-form-item label="设备类别名称">
          <el-input v-model="searchEqptType.name" @keydown.enter.prevent="loadEqptType" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchEqptType.status" @change="loadEqptType" placeholder="请选择" style="width: 100px">
            <el-option v-for="item in equipTypeStatusArr" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="loadEqptType">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin:5px;">
      <div style="margin: 10px 0px 40px 10px;">
        设备类别列表
        <el-button @click="addEqptType" type="primary" style="float:right;margin-top: -3px;">新增设备类别</el-button>
      </div>
      <div>
        <el-table :data="eqptTypeArr">
          <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
          <el-table-column prop="name" label="类别名称" align="center">
            <template #default="scope">
              <el-button @click="showEqpt(scope.row)" link type="primary">{{scope.row.name}}</el-button>
            </template>
          </el-table-column>
          <el-table-column  prop="description" label="描述" align="center"></el-table-column>
          <el-table-column  prop="status" label="状态" align="center" :formatter="statusFormat"></el-table-column>
          <el-table-column  prop="entryTime" label="创建时间" align="center"></el-table-column>
          <el-table-column  prop="updateTime" label="更新时间" align="center"></el-table-column>
          <el-table-column  prop="deleteTime" label="删除时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button @click="editeEqptType(scope.row)" link type="primary" size="small">编辑</el-button>
              <el-button @click="delEqptType(scope.row.id)" v-if="scope.row.status==40" link type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog :title="dialogTitle" v-model="dialogVisible"
               :close-on-click-modal="false" style="width:800px;padding:40px;">
      <el-form label-position="top" label-width="80px">
        <el-form-item label="类别名称">
          <el-input v-model="eqptType.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="eqptType.description" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="eqptType.status"  placeholder="请选择" >
            <el-option v-for="item in equipTypeStatusArr" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button @click="saveEqptType" type="primary">保存</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const searchEqptType=ref({})
const dialogVisible=ref(false)
const dialogTitle=ref()
const equipTypeStatusArr=ref([])
const eqptType=ref({})
const eqptTypeArr=ref([])
const loadEqptType = () => {
  axios.post(BASE_URL+'/v1/equipmentType/select',searchEqptType.value)
      .then((response)=>{
        if (response.data.code==2000){
          eqptTypeArr.value=response.data.data
          if (searchEqptType.value.status!=40){
            eqptTypeArr.value=eqptTypeArr.value.filter(item => item.status!=40)
            console.log(eqptTypeArr.value)
          }
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
onMounted(()=>{
  loadEqptType();
  loadDictOptions(equipTypeStatusArr,'EquipTypeStatus')
})
const showEqpt = (row) => {
  router.push('/empHome/equipment?id='+row.id+'&name='+row.name)
}
const reset = () => {
  searchEqptType.value={}
  loadEqptType()
}
const addEqptType = () => {
  dialogTitle.value="新增设备类型"
  dialogVisible.value=true
  eqptType.value={}
}
const editeEqptType = (row) => {
  dialogTitle.value="编辑设备类型信息"
  dialogVisible.value=true
  loadEqptType()
  eqptType.value=row
}
const updateStatus = (row) => {
  eqptType.value=row
  saveEqptType()
}
const saveEqptType = () => {
  if (confirm("确认保存吗")){
    axios.post(BASE_URL+'/v1/equipmentType/save',eqptType.value)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("保存成功")
            dialogVisible.value=false
            eqptType.value={}
            loadEqptType()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const handleClose = () => {
  if (confirm("确认关闭弹窗吗")){
    dialogVisible.value=false
  }
}
const delEqptType = (id) => {
  if (confirm("你确定要从磁盘中删除该设备类别吗")){
    axios.delete(BASE_URL+'/v1/equipmentType/delete/'+id)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("删除成功")
            loadEqptType()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const statusFormat = (row,column,cellValue,index) => {
  if (!equipTypeStatusArr){
    return cellValue;
  }
  for (let item of equipTypeStatusArr.value){
    if (item.value == cellValue){
      cellValue = item.label
    }
  }
  return cellValue;
}
</script>

<style scoped>

</style>